﻿<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>albums</title>
    <link rel="stylesheet" type="text/css" href="css/demo.css" />
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <link rel="stylesheet" type="text/css" href="css/custom.css" />
    <script type="text/javascript" src="js/modernizr.custom.79639.js"></script>
    <noscript>
    <link rel="stylesheet" type="text/css" href="css/styleNoJS.css" />
  </noscript>
</head>

<style>
    .search-input {
        border-radius: 50px;
        height: 50px;
    }
    
    .search-submit {
        background-image: url(images/search-icon.png);
        background-position: center;
        background-repeat: no-repeat;
        border-radius: 50%;
        width: 50px;
        height: 50px;
        position: absolute;
        left: 250px;
    }
</style>

<body>
    <div class="container demo-1">


        <nav class="codrops-demos" style="position: absolute; left: 300px; top: 5px;">
            <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
            <p style="font-size: 20px;">&nbsp;&nbsp;&nbsp;Please choose one type to search</p>
            <a style="font-size: 30px;" href="../ranking_of_singers/index.html">singers</a>
            <a style="font-size: 30px;" class="current-demo" href="#">albums</a>
            <a style="font-size: 30px;" href="../ranking_of_songs/index.html">songs</a>
            <form target="_self" style="position: absolute; left: 800px; top: 60px; font-size: 20px;" method="GET" action="../search/search_album.php">
                <input style="font-size: 20px;" type="text" class="search-input" placeholder="          Type to search" name="album" />
                <input type="submit" class="search-submit" value=" ">
            </form>
        </nav>

        <div id="slider" class="sl-slider-wrapper">

            <div class="sl-slider">

                <div class="sl-slide bg-1" data-orientation="horizontal" data-slice1-rotation="-25" data-slice2-rotation="-25" data-slice1-scale="2" data-slice2-scale="2">
                    <div class="sl-slide-inner">
                        <!-- <form target="_self" style="position: absolute; left: 1150px; top: 50px;" method="GET" action="../search/search_album.php">
              <input type="text" class="search-input" placeholder="    Type to search" name="album"/>
              <input type="submit" class="search-submit" value=" ">
            </form> -->
                        <a target="_self" href="php/album.php ? album=青年晚报">
                            <div class="deco" style="background-image: url('http://p2.music.126.net/Wcs2dbukFx3TUWkRuxVCpw==/3431575794705764.jpg?param=177y177'); background-size:260px ; background-repeat: no-repeat; background-position: center;">
                            </div>
                        </a>
                        <h2>青年晚报</h2>
                        <blockquote>
                            <p>
                                ◆2016年许嵩最新作品《青年晚报》，许嵩第6张词曲全创作专辑。 ◆《青年晚报》，是一个三十而立的青年敞开自己和你面对面交心，也是一家晚报记述着生活的真相和所引发的思考，感性与理性交叠。
                            </p>
                            <cite style="font-size: 15px;">total comment : 2886859</cite>
                        </blockquote>
                    </div>
                </div>

                <div class="sl-slide bg-2" data-orientation="vertical" data-slice1-rotation="10" data-slice2-rotation="-15" data-slice1-scale="1.5" data-slice2-scale="1.5">
                    <div class="sl-slide-inner">
                        <!-- <form style="position: absolute; left: 1150px; top: 50px;" method="GET" action="../search/search_album.php">
              <input type="text" class="search-input" placeholder="     Type to search" name="album"/>
              <input type="submit" class="search-submit" value=" ">
            </form> -->
                        <a href="php/album.php ? album=叶惠美">
                            <div class="deco" style="background-image: url('http://p2.music.126.net/yjVbsgfNeF2h7fIvnxuZDQ==/18894007811887644.jpg?param=177y177'); background-size:260px ; background-repeat: no-repeat; background-position: center;">
                            </div>
                        </a>
                        <h2>叶惠美</h2>
                        <blockquote>
                            <p>
                                近日转会加盟新公司的周杰伦，同时推出了其年度国语专辑《叶惠美》，收录11首个人独唱歌曲。虽然新碟的惊喜不大，但仍保持着阿Jay一贯的个人风格(其实这正是乐迷最喜欢的)，而且多首歌曲亦较以往更有深度，故此并不算「原地踏步」。再者，当中某几首歌曲，更是惹人钟爱之作，相信这专辑依然会得到不少乐迷支持。
                            </p>
                            <cite style="font-size: 15px;">total comment : 2321251</cite>
                        </blockquote>
                    </div>
                </div>

                <div class="sl-slide bg-3" data-orientation="horizontal" data-slice1-rotation="3" data-slice2-rotation="3" data-slice1-scale="2" data-slice2-scale="1">
                    <div class="sl-slide-inner">
                        <!-- <form style="position: absolute; left: 1150px; top: 50px;" method="GET" action="../search/search_album.php">
              <input type="text" class="search-input" placeholder="     Type to search" name="album"/>
              <input type="submit" class="search-submit" value=" ">
            </form> -->
                        <a href="php/album.php ? album=十">
                            <div class="deco" style="background-image: url('http://p1.music.126.net/1EcRIRjRTIL-oBbbffFbqA==/109951164548872463.jpg?param=177y177'); background-size:260px ; background-repeat: no-repeat; background-position: center;">
                            </div>
                        </a>
                        <h2>十</h2>
                        <blockquote>
                            <p>
                                十首好歌 · 十足诚意 · 十成收获 摩登兄弟刘宇宁 · 个人首张专辑 ·《十》 吴青峰 · 蔡健雅 · 戴佩妮 · 徐佳莹 · 葛大为 荒井十一 · 刘胡轶 · 郭一凡 · 唐汉霄 · 羽田 超级幕后创作及制作阵容 联手打造《十》首新歌</p>
                            <cite style="font-size: 15px;">total comment : 2210297</cite>
                        </blockquote>
                    </div>
                </div>

                <div class="sl-slide bg-4" data-orientation="vertical" data-slice1-rotation="-5" data-slice2-rotation="25" data-slice1-scale="2" data-slice2-scale="1">
                    <div class="sl-slide-inner">
                        <!-- <form style="position: absolute; left: 1150px; top: 50px;" method="GET" action="../search/search_album.php">
              <input type="text" class="search-input" placeholder="    Type to search" name="album"/>
              <input type="submit" class="search-submit" value=" ">
            </form> -->
                        <a href="php/album.php ? album=渡">
                            <div class="deco" style="background-image: url('http://p1.music.126.net/fNbj5uDwltSDLbETdnEYYQ==/109951163069265719.jpg?param=177y177'); background-size:260px ; background-repeat: no-repeat; background-position: center;">
                            </div>
                        </a>
                        <h2>渡</h2>
                        <blockquote>
                            <p>
                                2017年华语音乐圈最受期待唱片作品 全能唱作奇才薛之谦掏心力作  昨日渡往明日 从回忆渡往梦想 从现实渡往幻境 薛之谦【渡 The Crossing】正式发行 献给所有风雨同路的渡人们
                            </p>
                            <cite style="font-size: 15px;">total comment : 1753325</cite>
                        </blockquote>
                    </div>
                </div>

                <div class="sl-slide bg-5" data-orientation="horizontal" data-slice1-rotation="-5" data-slice2-rotation="10" data-slice1-scale="2" data-slice2-scale="1">
                    <div class="sl-slide-inner">
                        <!-- <form style="position: absolute; left: 1150px; top: 50px;" method="GET" action="../search/search_album.php">
              <input type="text" class="search-input" placeholder="     Type to search" name="album"/>
              <input type="submit" class="search-submit" value=" ">
            </form> -->
                        <a href="php/album.php ? album=尘">
                            <div class="deco" style="background-image: url('http://p2.music.126.net/DHUrNjC-1d6Snpcfg20Umw==/109951164583315133.jpg?param=177y177'); background-size:260px ; background-repeat: no-repeat; background-position: center;">
                            </div>
                        </a>
                        <h2>尘</h2>
                        <blockquote>
                            <p>
                                音乐十年 一《尘》释出 薛之谦第十张专辑《尘》 正式发行 尘世堆砌成沙 模糊鹿与马 世人多历风雨 无意真与假 病态的时代里 配合谎与花 未来总有期许 守护爱无价 他 以音乐灵魂 探讨现世各式命题
                            </p>
                            <cite style="font-size: 15px;">total comment : 1276049</cite>
                        </blockquote>
                    </div>
                </div>
            </div>
            <!-- /sl-slider -->

            <nav id="nav-arrows" class="nav-arrows">
                <span class="nav-arrow-prev">Previous</span>
                <span class="nav-arrow-next">Next</span>
            </nav>

            <nav id="nav-dots" class="nav-dots">
                <span class="nav-dot-current"></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </nav>

        </div>
        <!-- /slider-wrapper -->

    </div>

    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="js/jquery.ba-cond.min.js"></script>
    <script type="text/javascript" src="js/jquery.slitslider.js"></script>
    <script type="text/javascript">
        $(function() {

            var Page = (function() {

                var $navArrows = $('#nav-arrows'),
                    $nav = $('#nav-dots > span'),
                    slitslider = $('#slider').slitslider({
                        onBeforeChange: function(slide, pos) {

                            $nav.removeClass('nav-dot-current');
                            $nav.eq(pos).addClass('nav-dot-current');

                        }
                    }),

                    init = function() {

                        initEvents();

                    },
                    initEvents = function() {

                        // add navigation events
                        $navArrows.children(':last').on('click', function() {

                            slitslider.next();
                            return false;

                        });

                        $navArrows.children(':first').on('click', function() {

                            slitslider.previous();
                            return false;

                        });

                        $nav.each(function(i) {

                            $(this).on('click', function(event) {

                                var $dot = $(this);

                                if (!slitslider.isActive()) {

                                    $nav.removeClass('nav-dot-current');
                                    $dot.addClass('nav-dot-current');

                                }

                                slitslider.jump(i + 1);
                                return false;

                            });

                        });

                    };

                return {
                    init: init
                };

            })();

            Page.init();

            /**
             * Notes: 
             * 
             * example how to add items:
             */

            /*
      
      var $items  = $('<div class="sl-slide sl-slide-color-2" data-orientation="horizontal" data-slice1-rotation="-5" data-slice2-rotation="10" data-slice1-scale="2" data-slice2-scale="1"><div class="sl-slide-inner bg-1"><div class="sl-deco" data-icon="t"></div><h2>some text</h2><blockquote><p>bla bla</p><cite>Margi Clarke</cite></blockquote></div></div>');
      
      // call the plugin's add method
      ss.add($items);
  
      */

        });
    </script>


</body>

</html>